<!doctype html>

<!-- 这狗很屌，叫它都不理我！ -->

<!--
                                              ...
                                            .,///*.                       ..
                                           .,///*//,.                   .*/**.
                                          .,//*,,,*//******,,,....   .,*/////,.
                                       ..,*//*,,.,,,********//////***//****//*,
                                    .,*///**,,...........,,,,,,,,,****,,,,***/*.
                                  .,*//*,,,,.....,,,,,,,...........,.....,,,,*/*,.
                                .*//**,,.........,,,,,,,,...................,,,***.
                              .*//**,............,,,,,,.......................,,,**,.
                            .,*/*,,...............,,,,..........................,,**,.
                           .,//*,....,,*//**,....................................,,**,.
                          .*/*.    .,*/(%&&%(*.............,**///*,,,.............,,*/,.
                         .,/*,     .,,*/#@&&%(*.........,,/((#%&@&%(/,,............,*/*,
                         ,//,      ..,,*(&@@%(*,......,,*//*,*/%@@@@%/,.............,*/*.
                        .*/,.       .,,,*/((/,........,*//,.,/&@@@@&(*,.............,,**,
                        ,**.         ..,,**,,,..........,,***/#%%#(*,,... ...........,**,.
                       .*/*.          .*((##((/*,.....   ..,,,,,,,.....    ..........,***.
                       .*/,          ,(%@@@@@@&%/.            ......       ..........,***.
                       ,**,         ./##%&@&&&&%/.                         ..........,***.
                       ,**,         .,(%&&@&%%%(,                          ..........,***.
                       .**,          ,*/#%%%##/,.                         ...........,*/*.
                       .*/*.         .*(#%##/**,,...,,,,.                     .......,*/*.
                        ,*/,.         .,*///////***,,..                           ...,*/*.
                        .,/*,.             .....                                   ..,*/,.
                         .,//,.                                                    .,,/*,
                          .,*/*,.                                                  .,*/*.
                            .*//**,.                                              ..,*/,.
                             ,*////**,...                                       ...,*/*,
                          .,*//*,,*///*,.....                                 .....,*/*.
                        .,*/***.  .,,,,.                                      ....,,*/*.
                      .,*/*,,..  ......                                         ..,,*/,.
                   .,*///*,,.....,,..........,,..       ..,,....,,,,,,,,,.      ..,*/*,
                  ,*/**//*,....,**,.........,,*****,,.,*///**,..,,,........    ..,,*/,.
                .,/**,*//*,..,,*/*,............,,,,*///*,,,.....................,,*/*.
               .,//**,*//*,,,,*///*,.............,,*/*.    ....................,*//*.
                 .,***////*,...,*//*,,,.........,,*/*,      ..,,,,,,,,......,,,*//,.
                     ...,*/*,,,,**////**,,,,,,,,,*//*,......,**/////*********//*,.
                          .,******,..,***////*****///*****/**,,,***,,********,..
                                        ....,,,,,*****//*,,....,**,.
                                                     .,*****,,,*//,.
                                                       ..,*******,.
                                                            ...
-->

<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=1024" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>周杰伦</title>
    <link href="impress.css" rel="stylesheet" />
</head>

<body class="impress-not-supported">

<div class="fallback-message">
    <p>你的浏览器<b>不支持</b> impress.js, 酷帅狂拽吊炸天的特效都显示不了。</p>
    <p>为了更好的体验，请使用最新的 <b>Chrome</b>, <b>Safari</b> 或 <b>Firefox</b> 浏览器。</p>
</div>

<div id="impress">

    <div id="start" class="step slide" data-x="0" data-y="0">
        <p class="one-line">Hello大家好，我是周杰伦。</p>
    </div>

    <div class="step slide" data-x="1000" data-y="0">
        <p>1979年1月18日我来到了这个世界。</p>
        <div class="img-box" style="top: 16%;">
            <img src="img/born.jpg" />
        </div>
    </div>

    <div class="step slide" data-x="2000" data-y="0">
        <p>没错，小时候的我就这么拽了 o(￣ヘ￣*o)</p>
        <div class="img-box" style="top: 28%;">
            <img src="img/child.jpg" />
        </div>
    </div>

    <div class="step slide" data-x="2000" data-y="800">
        <p>我不止弹钢琴溜，大提琴也很拉风。</p>
        <div class="img-box" style="top: 15%;">
            <img src="img/cello.jpg" />
        </div>
    </div>

    <div class="step slide" data-x="2000" data-y="1600">
        <p>长大之后我喜欢上了鸭舌帽。</p>
        <div class="img-box" style="top: 20%;">
            <img src="img/cap.jpg" />
        </div>
    </div>

    <div class="step slide" data-x="2000" data-y="2400">
        <p>后来在一个节目上碰到了宪哥，便当起了音乐助理。</p>
        <div class="img-box" style="top: 20%;">
            <img src="img/jacky.jpg" />
        </div>
    </div>

    <div class="step slide" data-x="2000" data-y="3200">
        <p>这是方文山，我写的歌和他写的词，都(mei)很(ren)屌(yao)。</p>
        <div class="img-box" style="top: 17%;">
            <img src="img/vincent.jpg" />
        </div>
    </div>

    <div class="step slide" data-x="1000" data-y="3200">
        <p class="one-line">期间我们不停的写歌，终于...</p>
    </div>

    <div class="step slide" data-x="0" data-y="2400">
        <p>在2000年发行了第一张同名专辑《Jay》</p>
        <div class="img-box" style="top: 15%;">
            <img src="img/album-jay.jpg" />
        </div>
    </div>

    <!-- A -->

    <div class="step slide" data-x="4000" data-y="3200">
        <p>这是我的时代，只是封面不能重拍(╯‵□′)╯︵ ┻━┻</p>
        <div class="img-box" style="top: 10%;">
            <img src="img/time.jpg" />
        </div>
    </div>

    <div class="step slide" data-x="4500" data-y="2400">
        <p>哎哟，对了，大家要《听妈妈的话》</p>
        <div class="img-box" style="top: 10%;">
            <img src="img/yehuimei.jpg" />
        </div>
    </div>

    <div class="step slide" data-x="5000" data-y="1600">
        <p>2004年是《七里香》，每年夏天的约定。</p>
        <div class="img-box" style="top: 21%;">
            <img src="img/qilixiang.jpg" />
        </div>
    </div>

    <div class="step slide" data-x="5400" data-y="800">
        <p>同年还有《无与伦比》演唱会。</p>
        <div class="img-box" style="top: 17%;">
            <img src="img/incomparable.jpg" />
        </div>
    </div>

    <div class="step slide" data-x="6000" data-y="0">
        <p>之后的我《一路向北》</p>
        <div class="img-box" style="top: 17%;">
            <img src="img/ae86.jpg" />
        </div>
    </div>

    <div class="step slide" data-x="6600" data-y="800">
        <p>《十一月的萧邦》虽然晚了一点，但感觉多了一点。</p>
        <div class="img-box" style="top: 11%;">
            <img src="img/album-chopin.jpg" />
        </div>
    </div>

    <div class="step slide" data-x="7000" data-y="1600">
        <p>《不能说的秘密》我是导演，当然要斗琴耍耍酷。</p>
        <div class="img-box" style="top: 12%;">
            <img src="img/secret.jpg" />
        </div>
    </div>

    <div class="step slide" data-x="7500" data-y="2400">
        <p>终于，2015年1月，我和昆凌结婚了...</p>
        <div class="img-box" style="top: 17%;">
            <img src="img/married.jpg" />
        </div>
    </div>

    <div class="step slide" data-x="6000" data-y="2400">
        <p>这是我的小公主。</p>
        <div class="img-box" style="top: 9%;">
            <img src="img/daughter.jpg" />
        </div>
    </div>

    <div class="step slide" data-x="7500" data-y="0">
        <p>2016年6月，《周杰伦的床边故事》发行</p>
        <div class="img-box" style="top: 9%;">
            <img src="img/2016.png" />
        </div>
    </div>

    <div class="step slide" data-x="6000" data-y="-2400">
        <p>2019年7月，#周杰伦#登顶微博话题</p>
        <div class="img-box" style="top: 17%;">
            <img src="img/weibo.png" />
        </div>
    </div>

    <div class="step slide" data-x="7500" data-y="-2400">
        <p>2019年9月，单曲《说好不哭》发行搞崩QQ音乐</p>
        <div class="img-box" style="top: 9%;">
            <img src="img/no_cry.jpg" />
        </div>
    </div>

    <div class="step slide" data-x="8000" data-y="3200">
        <p>只是你们还喜欢我的新歌吗？</p>
        <div class="img-box" style="top: 7%;">
            <img src="img/aiyo.jpg" />
        </div>
    </div>

    <!-- Y -->

    <div class="step slide" data-x="10200" data-y="3200">
        <p>其实我不知道，听我歌的这些歌迷，会持续到哪一天。</p>
        <div class="img-box" style="top: 12%;">
            <img src="img/end-1.jpg" />
        </div>
    </div>

    <div class="step slide" data-x="10200" data-y="2400">
        <p>但我还是得唱下去啊。</p>
        <div class="img-box" style="top: 12%;">
            <img src="img/end-2.jpg" />
        </div>
    </div>

    <div class="step slide" data-x="10200" data-y="1600">
        <p>在你压力大的时候，偶尔想起简单爱，我也很开心啊。</p>
        <div class="img-box" style="top: 15%;">
            <img src="img/end-3.jpg" />
        </div>
    </div>

    <div class="step slide" data-x="10800" data-y="800">
        <p>不见得你一定要听我的新歌你知道吗。</p>
        <div class="img-box" style="top: 16%;">
            <img src="img/end-4.jpg" />
        </div>
    </div>

    <div class="step slide" data-x="9600" data-y="800">
        <p>这群歌迷，有人加入，有人退出。</p>
        <div class="img-box" style="top: 14%;">
            <img src="img/end-5.jpg" />
        </div>
    </div>

    <div class="step slide" data-x="9000" data-y="0">
        <p>但是你曾经加入，我也很感谢你。</p>
        <div class="img-box" style="top: 15%;">
            <img src="img/end-6.jpg" />
        </div>
    </div>

    <div class="step slide" data-x="11400" data-y="0">
        <p>只要有一个歌迷还爱听，我就继续唱下去。</p>
        <div class="img-box" style="top: 12%;">
            <img src="img/end-7.jpg" />
        </div>
        <p class="footer">
            
            
        </p>
    </div>

    <div id="jay" class="step" data-x="5800" data-y="1600" data-scale="10">

    </div>

</div>

<div class="hint">
    <p>按空格或方向键->浏览</p>
</div>

<script>
    //https://zhoujielun.me
if ("ontouchstart" in document.documentElement) { 
    document.querySelector(".hint").innerHTML = "<p>Tap on the left or right to navigate</p>";
}
</script>

<script src="impress.js"></script>
<script>impress().init();</script>

</body>
</html>